<template>
  <view class="height-100 bg-df-a padding">
    <!-- 带圆角和阴影的导航容器 -->
    <view class="nav-wrapper">
      <view 
        v-for="(item, index) in navItems" 
        :key="index"
        class="nav-item"
      >
        <image 
          v-if="item.icon" 
          :src="item.icon" 
          mode="aspectFit" 
          class="nav-icon"
        />
        <text class="nav-text">{{ item.text }}</text>
      </view>
    </view>
	<view class="hotSellingGoods">
		热卖商品
	</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const navItems = ref([
  {
    text: '货品管理',
    icon: 'https://img.icons8.com/ios/50/box--v1.png'
  },
  {
    text: '采购管理',
    icon: 'https://img.icons8.com/ios/50/shopping-cart--v1.png'
  },
  {
    text: '库存管理',
    icon: 'https://img.icons8.com/ios/50/warehouse.png'
  },
  {
    text: '客户管理',
    icon: 'https://img.icons8.com/ios/50/conference-call.png'
  }
])


</script>

<style scoped>
/* 外层容器 */
.nav-container {
  padding: 20rpx; /* 外边距 */
}

/* 导航包装层 - 添加圆角和阴影 */
.nav-wrapper {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-radius: 20rpx; /* 圆角 */
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); /* 阴影 */
  padding: 16rpx 0;
}

/* 导航项 */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 20rpx;
}

/* 导航图标 */
.nav-icon {
  width: 112rpx;
  height: 112rpx;
  margin-bottom: 8rpx;
}

/* 导航文字 - 保持原有样式 */
.nav-text {
  width: 96rpx;
  font-family: "Source Han Sans", "Source Han Sans CN", sans-serif;
  font-weight: 400;
  font-size: 24rpx;
  color: #222222;
  line-height: 48rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

</style>